<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0039)http://www.fgm.cc/learn/lesson6/01.html -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <title>完美拖拽</title>
    <style type="text/css">
        /*html, body {*/
        /*    overflow: hidden;*/
        /*}*/

        body, div, h2, p {
            margin: 0;
            padding: 0;
        }

        body {
            color: #fff;
            background: #000;
            font: 12px/2 Arial;
        }

        p {
            padding: 0 10px;
            margin-top: 10px;
        }

        span {
            color: #ff0;
            padding-left: 5px;
        }

        #box {
            position: absolute;
            width: 300px;
            height: 150px;
            background: #333;
            border: 2px solid #ccc;
            top: 50%;
            left: 50%;
            margin: -75px 0 0 -150px;
        }

        #box h2 {
            height: 25px;
            cursor: move;
            background: #222;
            border-bottom: 2px solid #ccc;
            text-align: right;
            padding: 0 10px;
        }

        #box h2 a {
            color: #fff;
            font: 12px/25px Arial;
            text-decoration: none;
            outline: none;
        }
    </style>
    <script type="text/javascript">
        window.onload = function () {
            var oBox = document.getElementById("box");
            var oH2 = oBox.getElementsByTagName("h2")[0];
            var oA = oBox.getElementsByTagName("a")[0];
            var aSpan = oBox.getElementsByTagName("span");
            var disX = disY = 0;
            var bDrag = false;
            var aPos = [{x: oBox.offsetLeft, y: oBox.offsetTop}]

            //鼠标按下, 激活拖拽
            oH2.onmousedown = function (event) {
                var event = event || window.event;
                bDrag = true;
                disX = event.clientX - oBox.offsetLeft;
                disY = event.clientY - oBox.offsetTop;

                aPos.push({x: oBox.offsetLeft, y: oBox.offsetTop})

                this.setCapture && this.setCapture();

                return false
            };

            //拖拽开始
            document.onmousemove = function (event) {
                if (!bDrag) return;
                var event = event || window.event;
                var iL = event.clientX - disX;
                var iT = event.clientY - disY;
                var maxL = document.documentElement.clientWidth - oBox.offsetWidth;
                var maxT = document.documentElement.clientHeight - oBox.offsetHeight;

                iL = iL < 0 ? 0 : iL;
                iL = iL > maxL ? maxL : iL;

                iT = iT < 0 ? 0 : iT;
                iT = iT > maxT ? maxT : iT;

                oBox.style.marginTop = oBox.style.marginLeft = 0;
                oBox.style.left = iL + "px";
                oBox.style.top = iT + "px";

                aPos.push({x: iL, y: iT})

                status();

                return false
            };

            //鼠标释放, 结束拖拽
            document.onmouseup = window.onblur = oH2.onlosecapture = function () {
                bDrag = false;
                oH2.releaseCapture && oH2.releaseCapture();
                status()
            };

            //回放拖动轨迹
            oA.onclick = function () {
                if (aPos.length == 1) return;
                var timer = setInterval(function () {
                    var oPos = aPos.pop();
                    oPos ? (oBox.style.left = oPos.x + "px", oBox.style.top = oPos.y + "px", status()) : clearInterval(timer)
                }, 30);

                this.focus = false;//去除链接虚线

                return false
            };

            //阻止冒泡
            oA.onmousedown = function (event) {
                (event || window.event).cancelBubble = true
            };

            //监听状态函数
            function status() {
                aSpan[0].innerHTML = bDrag;
                aSpan[1].innerHTML = oBox.offsetTop;
                aSpan[2].innerHTML = oBox.offsetLeft
            }

            //初始调用
            status()
        };
    </script>
    <style>@font-face {
        font-family: uc-nexus-iconfont;
        src: url(chrome-extension://pogijhnlcfmcppgimcaccdkmbedjkmhi/res/font_9qmmi8b8jsxxbt9.woff) format('woff'), url(chrome-extension://pogijhnlcfmcppgimcaccdkmbedjkmhi/res/font_9qmmi8b8jsxxbt9.ttf) format('truetype')
    }</style>
</head>
<body>
<div id="box" style="margin-left: 0px; margin-top: 0px; left: 385px; top: 229px;">
    <h2><a href="javascript:;">点击回放拖动轨迹</a></h2>
    <p><strong>Drag:</strong><span>false</span></p>
    <p><strong>offsetTop:</strong><span>229</span></p>
    <p><strong>offsetLeft:</strong><span>385</span></p>
</div>


<div></div>
</body>
</html>